

<template>
  <div>
    <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
    <Modal
      v-model="mode"
      width="50%"
      title="新增用户"
      @change="testChange"
      @on-cancel="cancel"
    >
      <Row>
        <Form
          ref="createUserData"
          :model="UserData"
          :rules="ruleInUser"
          :label-width="100"
        >
          <div style="width: 100%; height: auto; margin: 0 auto">
            <Row>
              <i-col span="12">
                <FormItem label="姓名：" prop="RealName">
                  <label slot="label">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                  <Input
                    v-model="UserData.RealName"
                    placeholder="请输入姓名"
                    ref="RealName"
                    @on-enter="onInputEnter('Mobile')"
                    @on-focus="cleanZero('RealName')"
                  ></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="手机号：" prop="Mobile">
                  <label slot="label">手机号：</label>
                  <Input
                    v-model="UserData.Mobile"
                    placeholder="请输入手机号："
                    ref="Mobile"
                    @on-enter="onInputEnter('UserName')"
                    @on-focus="cleanZero('Mobile')"
                  ></Input>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="12">
                <FormItem label="登录名：" prop="UserName">
                  <label slot="label">登录名：</label>
                  <Input
                    v-model="UserData.UserName"
                    placeholder="请输入登录名："
                    ref="UserName"
                    @on-enter="onInputEnter('Password')"
                    @on-focus="cleanZero('UserName')"
                  ></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="密码：" prop="Password">
                  <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                  <Input
                    v-model="UserData.Password"
                    placeholder="请输入密码："
                    ref="Password"
                    @on-enter="onInputEnter('CompanyId')"
                    @on-focus="cleanZero('Password')"
                  ></Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <!-- <i-col span="12">
                        <FormItem label="角色：" prop="Role" >
                            <label slot="label">角&nbsp;&nbsp;&nbsp;&nbsp;色：</label>
                            <Select v-model="UserData.Role" placeholder="请选择角色">
                              <Option v-for="item in RoleList" :value="item.Id" :key="item.Id">{{ item.RoleName }}</Option>
                            </Select>
                        </FormItem> 
                    </i-col> -->
              <i-col span="12">
                <FormItem label="选择企业：" prop="CompanyId">
                  <label slot="label">选择企业：</label>
                  <Select
                    :label-in-value="true"
                    @on-change="getcompany"
                    v-model="UserData.CompanyId"
                    placeholder="请选择选择企业："
                  >
                    <Option
                      v-for="item in CompanyList"
                      :value="item.Id"
                      :key="item.Id"
                      :lable="item.CompanyName"
                      >{{ item.CompanyName }}</Option
                    >
                  </Select>
                </FormItem>
              </i-col>
              <!-- <i-col span="12">
                <FormItem label="选择部门：" prop="Dept">
                  <label slot="label">选择部门：</label>
                  <Select
                    :label-in-value="true"
                    @on-change="getdept"
                    v-model="UserData.DeptId"
                    placeholder="请选择选择部门："
                  >
                    <Option
                      v-for="item in DeptList"
                      :value="item.Id"
                      :key="item.Id"
                      >{{ item.DeptName }}</Option
                    >
                  </Select>
                </FormItem>
              </i-col> -->
            </Row>
          </div>
        </Form>
      </Row>
      <div slot="footer">
        <Button
          type="primary"
          :loading="loading"
          @click="handleSubmit('createUserData')"
          >提交</Button
        >
        <Button :loading="loading" @click="cancel('createUserData')"
          >取消</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getCompanyList,
  getDeptList,
  getUserlist,
  createUserData,
  getVehlist,
  subOrderData,
} from "@/api/data";
import { formatDate } from "../../components/date.js";
export default {
  name: "UserAdd",
  data() {
    return {
      loading: false,
      mode: this.add,

      //表单验证规则
      ruleInUser: {
        UserName: [
          { required: true, message: "请填写登录名", trigger: "blur" },
        ],
        CompanyId: [
          {
            required: true,
            message: "请选择企业",
            trigger: "blur",
            type: "number",
          },
        ],
        RealName: [
          { required: true, message: "请填写真实姓名", trigger: "blur" },
        ],
        // Password: [
        //   {
        //     required: true,
        //     pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/,
        //     message: "必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间",
        //     trigger: "blur",
        //   },
        // ],
        Password: [
          {
            required: true,

            message: "请输入密码",
          },
        ],
        Mobile: [
          {
            required: true,
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        Dept: [
          {
            required: true,
            type: "number",
            message: "请选择部门",
            trigger: "change",
          },
        ],
        // Role: [
        //   { required: true, type:"number", message: '请选择角色', trigger: 'change' }
        // ],

        // FactoryId: [
        //   {
        //     required: true,
        //     type: "number",
        //     message: "请选择加工厂",
        //     trigger: "change",
        //   },
        // ],
      },
      //FactoryIdList:[],
      RoleList: [],
      CompanyList: [],
      DeptList: [],
      listdata: [],
    };
  },
  props: {
    add: {
      type: Boolean,
      required: true,
    },
    UserData: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
  },
  methods: {
    // getcompany(company) {
    //   console.log(company, 111111);
    //   this.UserData.CompanyName = company.label; // 给公司赋值
    // },
    getcompany: function (val) {
      let that = this;
      that.UserData.CompanyName = val.label; //获取label
      that.UserData.CompanyId = val.value; //获取value
    },
    getdept(dept) {
      console.log(dept, 111111);
      this.UserData.DeptName = dept.label; // 给部门赋值
    },
    testChange(val) {
      this.$emit("testChange", val);
    },
    cancel() {
      this.loading = false;
      let data = {
        mode: false,
      };
      this.$emit("cancelCallBack", data);
    },
    //提交编辑后的userInfo
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log("提交验证：", valid);
        if (valid) {
          this.loading = true;
          this.submit();
        } else {
          this.$Message.error("请填写相关信息!");
        }
      });
    },
    submit() {
      const data = {
        UserName: this.UserData.UserName,
        Password: this.UserData.Password,
        //  Password: "123456",
        RealName: this.UserData.RealName,
        Mobile: String(this.UserData.Mobile),
        // 企业字段
        Dept: 3,
        Company: {
          Id: this.UserData.CompanyId,
        },
      };
      createUserData(data)
        .then((res) => {
          if (res !== null) {
            this.$Message.success("提交成功");
            this.$refs.createUserData.resetFields();
            this.loading = false;
            let data = {
              mode: false,
            };
            this.$emit("success", data);
          } else if (response.data.Srate == 0) {
            this.$Message.error("提交失败");
          } else if (response.data.Srate == 1) {
            this.$Message.error("账号已存在");
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交");
          this.loading = false;
        });
    }, //给输入框添加回车功能
    onInputEnter(next) {
      let node = this.$refs[next];
      node.focus();
    }, //输入框默认值为零时，自动清空内容
    cleanZero(input) {
      console.log(this.UserData[input]);
      if (this.UserData[input] == 0) {
        this.UserData[input] = null;
      }
    },
  },
  mounted() {
    const cmpdata = {
      fields: "Id,CompanyName",
      offset: "0",
      limit: "-1",
    };
    const dptdata = {
      fields: "Id,DeptName",
      offset: "0",
      limit: "-1",
    };
    //获得包含公司Id和companyname字段的全部列表
    getCompanyList(cmpdata).then((res) => {
      this.CompanyList = res.List;
    });

    //获得包含公司Id和deptname字段的全部列表
    getDeptList(dptdata).then((res) => {
      this.DeptList = res.List;
    });
  },
  watch: {
    add(val) {
      this.mode = val;
    },
  },
};
</script>
<style>
.dept .ivu-select-placeholder {
  color: #515a6e !important;
}
</style>